<template>
    <div class="app-container">
        <el-form class="formBox formBox1" :model="form" :rules="rules" ref="form" size="small" :inline="true"
            label-width="68px">
            <el-row>
                <el-form-item label="顾客ID" prop="patientId">
                    <el-input v-model="form.patientId" placeholder="请输入顾客编号" clearable style="width: 160px"
                        :disabled="true" />
                </el-form-item>
                <el-form-item label="姓名" prop="patientName">
                    <el-input v-model="form.patientName" placeholder="请输入顾客姓名" clearable style="width: 160px"
                        :disabled="true" />
                </el-form-item>
            </el-row>


            <el-form-item label="预约时间" prop="appointmentDate">
                <el-date-picker v-model="form.appointmentDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                    :picker-options="pickerOptions0" style="width:140px" @change="changedate" :clearable="false">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="week">
                <el-input v-model="form.week" placeholder="周几" :readonly="true" style="width:60px" />
            </el-form-item>
            <el-form-item  prop="timeSlot">
                <el-select v-model="form.timeSlot" placeholder="时刻" style="width:80px" :disabled="false">
                    <el-option v-for="dict in sysUseTypeArr" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="预约项目" prop="planId">
                <el-select v-model="form.planId" filterable placeholder="请选择治疗项目" clearable style="width: 140px" :disabled="true"
                    @change="getName(1)">
                    <el-option v-for="item in singlePlanList" :key="item.planId" :label="item.medicalEquipment"
                        :value="item.planId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="doctorUsername">
                <el-select v-model="form.doctorUsername" filterable placeholder="请选择治疗医生" clearable style="width: 150px" :disabled="true"
                    @change="getName(2)">
                    <el-option v-for="item in treatmentDoctorUsersList" :key="item.userId" :label="item.nickName"
                        :value="item.userName"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item prop="remark">
                <el-input v-model="form.remark" placeholder="备注" style="width: 150px" />
            </el-form-item> -->
            <el-form-item>
                <el-button type="danger" icon="el-icon-edit"
                    size="small" plain @click="submitForm">修改预约</el-button>

            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getAppointment, listAllAppointment, addAppointment, updateAppointment, delAppointment,appointmentScheduling } from "@/api/appointManage/appointReserve";
import { getListUser } from "@/api/system/user";
import { deptNameList } from "@/api/system/dept";
import { getVisitDept } from "@/api/patientRegistration/registrationList";
import {
    listPlan,
} from "@/api/system/plan";
import departTag from "@/views/components/department/departTag.vue";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import department from "@/views/components/department/index.vue";
import appointTip from "@/views/components/customerDetail/appointTip.vue";
export default {
    name: "appointReservate",
    dicts: ["sys_textmanage_type", 'sys_manage_diseases'],
    components: { department, departTag, appointTip},
    props: ["formBacie"],
    data() {
        return {
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '一周以后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '2周以后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 14);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '30天以后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '60天以后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 60);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '90天以后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '6个月以后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 30*6);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '1年以后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 365);
                        picker.$emit('pick', date);
                    }
                }]
            },

            tablesList: [],
            sysUseTypeArr: [
                { label: '上午', value: 0 },
                { label: '下午', value: 1 }

            ],
            treatmentDoctorUsersList: [],//治疗医生
            // 总条数
            total: 0,
            form: {
                treatmentAppointmentId: undefined,
                schedulingId: undefined,
                appointmentDate: '',
                week: '',
                timeSlot: 0,
                planId: '',
                medicalEquipment: '',

                doctorUsername: '',
                doctorNickname: '',
                deptId: '',
                hospitalId: '',
                remark: '',
                way: 0, //0 pc 端 1 小程序
                patientId: undefined,
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                hospitalId: undefined,
                deptId: undefined,
                patientId: undefined,
                patientName: undefined,
                visitNum: undefined
            },
            // 表单校验
            rules: {
                appointmentDate: [
                    {
                        required: true,
                        message: "日期必选!",
                        trigger: "blur",
                    },
                ],
                deptId: [
                    {
                        required: true,
                        message: "科室必选!",
                        trigger: "blur",
                    },
                ],
                planId: [
                    {
                        required: true,
                        message: "治疗项目必选!",
                        trigger: "blur",
                    },
                ],


            },
            loading: false,
            deptNameLists: [],
            singlePlanList: [],
            open: false,
            appointItem:{},
            appointTipDialogVisible:false,
        }
    },
    created() {

    },
    mounted() {
        console.log(this.formBacie)
        this.form=this.formBacie
        this.getSinglePlanList()
            this.getTreatmentDoctorUsersList()

    },
    methods: {

        selectable(row, index) {
            var strtime = row.appointmentDate.replace("/-/g", "/");//时间转换
            var date1 = new Date(strtime);//现在时间
            var date2 = new Date();
            var d2 = date2.getFullYear() + "/" + (date2.getMonth() + 1) + "/" + date2.getDate()
            var date3 = new Date(d2);
            //判断时间是否过期
            return date1 < date3 ? false : true;
        },
        getName(type) {
            let textValue = "";
            if (type == 2) {
                this.treatmentDoctorUsersList.forEach((item) => {
                    if (item.userName == this.form.doctorUsername) {
                        textValue = item.nickName;
                    }
                });
                this.form.doctorNickname = textValue;
            } else if (type == 1) {
                this.singlePlanList.forEach((item) => {
                    if (item.planId == this.form.planId) {
                        textValue = item.medicalEquipment;
                    }
                });
                this.form.medicalEquipment = textValue;
            }

        },

        changedate() {
            let date = this.form.appointmentDate
            var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
            var week = weekArray[new Date(date).getDay()];//注意此处必须是先new一个Date

            this.form.week = "周" + week;
        },

         //查询治疗医生列表
         getTreatmentDoctorUsersList() {
            getListUser({ funcRole: '3', hospitalId: this.form.hospitalId }).then((response) => {
                if (response.code == 200) {
                    this.treatmentDoctorUsersList = response.data
                }
            });

        },
        /** 治疗项目 */
        getSinglePlanList() {
            listPlan({
                pageNum: 1,
                pageSize: 9999,
                status: 0,
                hospitalId: this.form.hospitalId,
                planCategoryId: "2"
            }).then(
                (response) => {
                    this.singlePlanList = response.rows;
                }
            );
        },





        /** 修改按钮操作 */

         sureComfire(data){//确认预约
             let obj=data[0]
             this.form.open=obj.open?1:0
             this.submitForm()

          },
        /** 提交按钮 */
        submitForm: function () {
            console.log(this.$refs["form"])
            this.$refs["form"].validate((valid) => {
                let that = this
                if (valid) {
                    if (this.form.treatmentAppointmentId != undefined) {

                        updateAppointment(this.form).then((response) => {
                            if (response.code == 200) {
                                this.$modal.msgSuccess("修改预约成功");
                                this.$emit("refresh")


                            }
                        });
                    } else {

                        addAppointment(this.form).then((response) => {
                            if (response.code == 200) {
                                this.$modal.msgSuccess("预约成功");
                                this.$emit("refresh")


                            }

                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row, type) {
            if (type == 1) { //单个删除
                const title = row.appointmentDate + row.week
                const treatmentAppointmentId = row.treatmentAppointmentId;
                this.$modal.confirm(
                    '是否确认"' +
                    title +
                    '"的数据项？'
                )
                    .then(function () {
                        return delAppointment(treatmentAppointmentId);
                    })
                    .then(() => {

                        this.$modal.msgSuccess("删除预约成功");
                    })
                    .catch(() => { });
            }
        },
    },
    created() {

    }
}
</script>

<style scoped rel="stylesheet/scss"  lang="scss">


</style>
